<template>
    <div class="container max-w-screen-lg bg-white bg-opacity-90 my-10 rounded">
        <div class="m-5">
            <header class="border-l-8 border-green-500 py-3 pl-4 bg-green-200 rounded italic tracking-widest">
                <span class="text-indigo-500 cursor-pointer" @click="Utils.go2Router('home')">主页</span>
                <span class="mx-2">/</span>
                <span>Logo设置</span>
            </header>


            <section class="mt-4">

                <div class="w-full py-3 pl-4 bg-green-200 text-sm rounded text-green-900 tracking-widest mb-2 flex">
                    <div class="mr-2">Logo开关</div>
                    <div class="flex">
                        <div class="flex justify-center items-center">
                            <input @click="logoSwitch = true" :checked="logoSwitch" type="radio" name="switchBgCheck"
                                   class="mr-2" id="checkBgTrue"/><label for="checkBgTrue"
                                                                         class="cursor-pointer">打开</label>
                        </div>
                        <div class="flex justify-center items-center cursor-pointer ml-2">
                            <input @click="logoSwitch = false" :checked="!logoSwitch" type="radio" name="switchBgCheck"
                                   class="mr-2" id="checkBgFalse"/><label for="checkBgFalse"
                                                                          class="cursor-pointer">关闭</label>
                        </div>
                    </div>
                </div>

                <div class="flex justify-start mb-4">
                    <div v-for="(item, index) in logoShowTypes" :key="item.uuid" :index="index"
                         @click="navClick(index)"
                         name="navlogo"
                         :class="`p-3 ${index == 0 ? 'border-b-4 text-green-500':''} border-green-500 text-sm tracking-widest cursor-pointer hover:bg-green-50 hover:text-green-500 transition`">
                        {{ item.name }}
                    </div>
                </div>

<!--                <transition enter-active-class="animated fadeInUp faster" tag="div">-->
                    <div v-show="logoShowType === 'url'" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="w-full flex justify-center items-center rounded p-20 border-2 border-dashed">
                            <div
                                class="btn btn-primary rounded-xl w-20 h-20 flex items-center justify-center cursor-pointer  "
                                style="border-radius: 100%;font-size: 1.875rem;line-height: 2.25rem"
                                @click="$refs.upload.click()">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <upload ref="upload" @upLoadSuccess="(res) => {url = res}"></upload>
                        </div>
                        <div class="flex justify-center items-center">
                            <img :src="url" class="max-h-40 cursor-pointer transition"
                                 @click="Utils.go2Link(url, '_blank')">
                        </div>
                    </div>
<!--                </transition>-->

<!--                <transition enter-active-class="animated fadeInUp faster" tag="div">-->
                    <div v-show="logoShowType === 'time'" class="flex justify-center items-center text-6xl">
                        {{ time }}
                    </div>
<!--                </transition>-->


<!--                <transition enter-active-class="animated fadeInUp faster" tag="div">-->
                    <div v-show="logoShowType === 'weather'">
                        <Weather style="z-index: 999"></Weather>
                    </div>
<!--                </transition>-->

            </section>

            <footer class="flex justify-center items-center mt-4">
                <button type="button" class="btn btn-primary w-full" @click="save()">保存</button>
            </footer>


        </div>
    </div>
</template>

<script>
import Weather from "../components/Weather";

window.WIDGET = {
    CONFIG: {
        "modules": "01234",
        "background": 5,
        "tmpColor": "4A4A4A",
        "tmpSize": "15",
        "cityColor": "4A4A4A",
        "citySize": "15",
        "aqiSize": "15",
        "weatherIconSize": "20",
        "alertIconSize": "16",
        "padding": "0px 0px 0px 0px",
        "shadow": "0",
        "language": "auto",
        "borderRadius": 5,
        "fixed": "false",
        "vertical": "middle",
        "horizontal": "left",
        "key": "a57958f86f70480d988820933f1d0f87"
    }
}
// window.onload = function () {
//     document.querySelector('#he-plugin-simple').style.zIndex = 2;
// }
export default {
    components: {Weather}
}
</script>
<script src="https://widget.heweather.net/simple/static/js/he-simple-common.js?v=1.1"></script>
<script>
import Weather from "../components/Weather";

export default {
    name: "LogoSet",
    components: {
        Weather
    },
    data() {
        return {
            breadcrumbs: [
                {
                    text: '主页',
                    disabled: false,
                    to: 'home'
                },
                {
                    text: 'Logo设置',
                    disabled: true,
                    to: 'logo'
                },
            ],
            tabIndex: null,
            logoSwitch: false,
            url: '',
            logoShowType: '',
            logoShowTypes: [
                // {
                //     uuid: this.Utils.generateUUID(),
                //     code: 'none',
                //     name: '无Logo',
                //     desc: '不展示Logo'
                // },
                {
                    uuid: this.Utils.generateUUID(),
                    code: 'url',
                    name: '图片',
                    desc: '自己上传一张图片，或者填入一个图片的链接'
                },
                {
                    uuid: this.Utils.generateUUID(),
                    code: 'time',
                    name: '时间',
                    desc: '每分钟更新'
                },
                {
                    uuid: this.Utils.generateUUID(),
                    code: 'weather',
                    name: '天气',
                    desc: '天气'
                },

            ],
            time: ''
        }
    },
    computed: {
        openUserInfo() {
            return JSON.parse(JSON.stringify(this.$store.getters.openUserInfo));
        }
    },
    watch: {
        openUserInfo: {
            handler() {
                this.init();
            },
            deep: true
        },
        // tabIndex(newVal) {
        //     this.logoShowType = this.logoShowTypes[newVal].code;
        // },
        logoShowType(newVal) {
            if (newVal === 'none') {
                this.logoShowType = 'url';
                return;
            }
            if (newVal === 'url') {
                this.tabIndex = 0;
            } else if (newVal === 'time') {
                this.tabIndex = 1;
            } else if (newVal === 'weather') {
                this.tabIndex = 2;
            }
            this.navClick(this.tabIndex);
        },
        logoSwitch(newVal) {
            if (newVal) {
                // 如果上一个 logoShowType 是 none 则打开开关后默认设置为 url
                if (this.openUserInfo.ext.logo.logoShowType === 'none') {
                    this.openUserInfo.ext.logo.logoShowType = 'url';
                }
            } else {
                this.openUserInfo.ext.logo.logoShowType = 'none';
            }
            // 不管怎样都更新下 openUserInfo 触发 背景变化
            this.$store.commit('uOpenUserInfo', this.openUserInfo);
            this.$toast.success('保存成功');
        }
    },
    mounted() {
        this.init();
        setInterval(() => {
            let now = new Date();
            let hours = now.getHours() > 9 ? now.getHours() : '0' + now.getHours();
            let minutes = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes();
            // let seconds = now.getSeconds() > 9 ? now.getSeconds() : '0' + now.getSeconds();
            this.time = hours + ':' + minutes;
        }, 1000);
    },
    methods: {
        navClick(index) {
            let elementNodeListOf = document.querySelectorAll('[name=navlogo]');
            elementNodeListOf.forEach((ele) => {
                ele.classList.remove('border-b-4', 'text-green-500');
            })
            // $event.target.classList.add('border-b-4', 'text-green-500');
            elementNodeListOf[index].classList.add('border-b-4', 'text-green-500');
            this.logoShowType = this.logoShowTypes[index].code;
        },
        init() {
            this.logoShowType = this.openUserInfo.ext.logo.logoShowType;
            this.url = this.openUserInfo.ext.logo.url;
            this.logoSwitch = this.logoShowType !== 'none';
        },
        save() {
            if (!this.logoSwitch) {
                this.$toast.warning('请先打开开关');
                return;
            }
            // this.logoShowType = this.logoShowTypes[this.tabIndex].code;
            this.openUserInfo.ext.logo.logoShowType = this.logoShowType;
            if (this.logoShowType == 'url' && this.url == '') {
                this.$toast.warning('请选择一个图片上传');
                return;
            }

            this.openUserInfo.ext.logo.url = this.url;
            this.$store.commit('uOpenUserInfo', this.openUserInfo);
            this.$toast.success('保存成功');
        },
    }
}
</script>

<style scoped lang="scss">

/*.upload-img {*/
/*    !*height: 200px;*!*/
/*    line-height: 200px;*/
/*    text-align: center;*/
/*}*/

</style>
